<template>
  <!-- 项目管理 -->
  <div class="personProject">
      <head-usual :title="projectTitle" :to="to"></head-usual>
      <!-- 我创建的、我参与的 -->
        <!-- <mt-navbar v-model="type">
            <mt-tab-item id="2" v-if="this.$store.state.userinfo.type==2">我发布的</mt-tab-item>
            <mt-tab-item id="1" v-else>我投递的</mt-tab-item>
        </mt-navbar> -->

        <!-- tab-container -->
        <div  v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="0">
     
            <!--发布的职位-->
      
              <div class="position-list" v-if="searchCondition.type==2">
                  <div  v-for="(item,index) in getPageList" :key="index">
                  <!-- 每一条职位信息 -->
                      <div class="position-item">
                          <p>
                              <span><router-link :to="'/jobs/detail/'+item.id" >{{item.name}}</router-link></span>
                              <span>{{item.lowSalary}}</span>
                          </p>
                          <div>
                              <p>
                                  <span>{{item.City}}</span>
                                  <span class="fenge01"></span>
                                  <span>{{item.experience}}</span>
                                  <span class="fenge01"></span>
                                  <span>{{item.degree}}</span>
                                  <span class="fenge01"></span>
                                  <span>{{item.nature}}</span>
                              </p>
                              <p></p>
                          </div>
                          <div>
                              <p>
                                  <svg class="icon price-bottom-01" aria-hidden="true">
                                      <use xlink:href="#icon-chakan"></use>
                                  </svg>
                                  <span>{{item.hits}}人查看></span>
                              </p>
                              <p>
                                  <span>{{item.addtime}}</span>
                                  <span>发布</span>
                              </p>
                          </div>
                          <div class="item-edit">
                                        <router-link class="edit-left" :to="'/user/position/candidate/'+item.id">报名人选 ({{item.deliveryNum}})</router-link>
                                        <span class="edit-fenge"></span>
                                        <a  @click="HandelDel(index,item.id)">删除职位</a>
                          </div>
                      </div>
                  </div>
              </div> 
            <!--投递的职位-->
         
                 <!-- 职位列表 -->
              <div class="position-list" v-else>
                <div  v-for="(item,index) in getPageList" :key="index">
                  <!-- 每一条职位信息 -->
                      <div class="position-item">
                          <p>
                            <span><router-link :to="'/jobs/detail/'+item.id" >{{item.name}}</router-link></span>
                              <span>{{item.lowSalary}}</span>
                          </p>
                          <div>
                              <p>
                                  <span>{{item.City}}</span>
                                  <span class="fenge01"></span>
                                  <span>{{item.experience}}</span>
                                  <span class="fenge01"></span>
                                  <span>{{item.degree}}</span>
                                  <span class="fenge01"></span>
                                  <span>{{item.nature}}</span>
                              </p>
                              <p @click="HanddelSignOut(index,item.id)">删除</p>
                          </div>
                          <div>
                              <p>
                                  <span>{{item.addtime}}</span>
                                  <span>发布</span>
                              </p>
                          </div>
                          <div class="project-send">
                                    <span class="send-1">投递反馈：</span>
                                    <p class="send-2">{{item.exInfo}}  <span class="send-3" @click="readMore(item.exInfo)" v-if="InfoLength(item.exInfo)">查看更多</span></p>
                          </div>
                      </div>
                  </div>
              </div> 
          <!-- 点击查看更多弹出框 -->
          <mt-popup v-model="popupMore" popup-transition="popup-fade" class="read-popup">
                  <p class="project-view">项目通知</p>
                  <p class="detail">表决开始了，我在现场看到，党和国家领导人走到选票箱前投票，全场响起了热烈的掌声。随后，每个代表都双手握着选票，走到投票箱前，郑重地投下自己的一票。</p>
          </mt-popup>
          <div v-show="loading" class="page-infinite-loading">
                        <mt-spinner type="fading-circle"></mt-spinner>
                        加载中...
            </div>
            <div v-show="allLoaded" class="page-infinite-data">亲！别拉了我是有底线的</div>
        </div>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
import { Navbar, TabItem , Popup  } from "mint-ui";
import headUsual from "@/pages/components/headUsual";
import {GetJobList,JobSignOut,Delete} from "@/api/user/job";
export default {
  data() {
    return {
     searchCondition:{
        id:0,
        pageIndex:1,
        type:0,
      },
      totalPage:0,
    
      getPageList:{},
      loading: false, //是否显示加载中
      allLoaded: false, //加载完毕
      projectTitle: "职位管理",
      to:'/user',
      ptitle: "资深建筑设计师", //创建的每个项目标题
      ptitle1: "首席设计师",//参与的每个项目标题
      visible:false, //项目阶段弹出框是否可见
      popupMore:false //点击查看更多
    };
  },
  created(){
      this.searchCondition.id= this.$store.state.userinfo.id;
      this.searchCondition.type= this.$store.state.userinfo.type;
      
     this. Initialization();
  },
  methods: {
      Initialization(){
            this.$indicator.open();
                setTimeout(() => {
                    GetJobList(this.searchCondition).then(res=>{
                    if (res.StatusCode === 200) {
                        this.getPageList = res.Data;
                        this.totalPage=res.TotalPage;
                        this.$indicator.close();
                        }
                    });  
            }, 100);
        },
      loadMore() {
          //分页加载更多
                if (this.searchCondition.pageIndex >= this.totalPage) {
                    this.allLoaded = true;
                    return;
                }
                this.loading = true;
                setTimeout(() => {
                    this.searchCondition.pageIndex++;
                    GetJobList( this.searchCondition).then(res => {
                    if (res.StatusCode === 200) {
                        this.getPageList = this.getPageList.concat(res.Data);
                }
                });
                this.loading = false;
            }, 1000);
         },
    // 对列表信息进行删除
      HanddelSignOut(index,jobid){
       MessageBox.confirm("是否取消该职位的投递？？").then(action => {
          JobSignOut(this.searchCondition.id,jobid).then(res=>{
              if(res.Data)
              {
                 this.getPageList.splice(index,1);
              }
              else  this.$toast("取消失败,请刷新重试！");
          });
        });
    },
    HandelDel(index,proid){
       MessageBox.confirm("你确定删除该职位??，删除后不能找回，请谨慎操作！！！").then(action => {
          Delete(proid).then(res=>{
              if(res.Data)
              {
                 this.getPageList.splice(index,1);
              }
              else  this.$toast("删除失败,请刷新重试！");
          });
        });
    },
    // 筛选项目阶段
    changeState() {
      this.visible = !this.visible;
       if(this.visible==true){
          $('.icon-xiala').attr('class','icon icon-active')
      }
      else{
          $('.icon-active').attr('class','icon icon-xiala');
      }  
    },
    learnMore(){
        this.$router.push('/user/position/candidate'+id);
    },
    readMore(info){
      $(".read-popup .detail").text(info);
      this.popupMore=true;
    },
    InfoLength(str){
      let x=JSON.stringify(str).length;
        if(x>50) return true;
        else return false;
    },
  },
    watch: {
    // type(val, oldVal) {
    //   this.searchCondition.type = val;
    //   this.searchCondition.pageIndex=1;
    //   this.Initialization();
    // }
  }
};
</script>

<style lang="scss" scoped>
.personProject {
  border-bottom: 36px solid #f4f4f4;
}
.headUsual {
  border-bottom: 1px solid #eeeeee;
}
.mint-navbar {
  width: 175px;
}
// 设置mint激活按钮字体颜色及下边栏
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 2px solid #fd4f00;
  color: #fd4f00;
  margin-bottom: -2px;
}
/* 设置个人中心项目管理激活按钮的样式 */
.mint-tab-item {
  color: #282828;
}

// 项目进程下拉按钮
.project-process {
  position: absolute;
  font-size: 14px;
  color: #999999;
  padding: 2px 6px;
  border: 1px solid #dcdcdc;
  border-radius: 14px;
  right: 12px;
  margin-top: -35px;
  z-index: 999999;
  background: #ffffff;
  .icon-active{
              transform: rotate(180deg);
          }
  ul{
      padding: 2px 0;
      text-align: center;
     
      li{
          border-bottom:1px solid #dcdcdc; 
          padding: 1px 0;
          
      }
      .process-title{
          border:none;
      }
      .li-2{
          border-top:1px solid #dcdcdc;
      }
      .li-last{
          border: none;
      }
      
  }
}
.process-open{
    height: auto;
}
// 职位列表信息
.position-list {
  // 每条职位信息
  .position-item {
    padding: 23px 0 0 0;
    border-bottom: 10px solid #f4f4f4;

    > :first-child {
      margin-bottom: 14.3px;
      overflow: hidden;
      margin-left:12px;
      margin-right: 12px;
      > span {
        display: block;
      }
      > :first-child {
        float: left;
        font-size: 16px;
        color: #282828;
        margin-right: 24px;
      }
      > :nth-child(2) {
        float: left;
        font-size: 16px;
        color: #fd4f00;
        margin-top: 1.5px;
      }
      > :nth-child(3) {
        float: right;
        font-size: 14px;
        color: #3887fe;
        margin-top: 1.5px;
      }
    }
    > :nth-child(2) {
      font-size: 12px;
      overflow: hidden;
      margin-left:12px;
      margin-right: 12px;
      > :first-child {
        float: left;
        color: #666666;
        display: flex;
        align-items: center;
        > span {
          display: block;
          float: left;
          margin-right: 10px;
        }
        > .fenge01 {
          display: block;
          float: left;
          width: 1px;
          height: 12px;
          background: #666666;
        }
      }
      > :last-child {
        float: right;
        font-size: 14px;
        color: #3887fe;
      }
    }
    > :nth-child(3) {
      margin-top: 14.3px;
      color: #999999;
      overflow: hidden;
      margin-left:12px;
      margin-right: 12px;
      > :first-child {
        float: left;
        > span {
          float: left;
          display: block;
        }
        > .icon {
          display: block;
          float: left;
          margin-top: 3px;
          margin-right: 7px;
        }
      }
      > :nth-child(2) {
        float: right;
      }
    }
    .project-send{
      margin-left:12px;
      margin-top:15px;
      margin-bottom: 15px;
      margin-right: 12px;
      font-size: 14px;
      border-top:1px dashed #f4f4f4;
      padding-top: 15px;
      position: relative;
      .send-1{
        color:#666666;
      
      }
      .send-2{
        color:#999999;
        overflow: hidden;//必须
        display: -webkit-box;//必须
        -webkit-line-clamp: 2;//必须
        -webkit-box-orient: vertical;//必须
        margin-bottom: 5px;
      }
            .send-3{
            color:#3887fe;  
          }
      
    }
    .item-edit{
      height: 44.6px;
      width: 100%;
      line-height: 44.6px;
      display: flex;
      border-top:1px solid #f4f4f4;
      margin-top:18px;
      font-size: 16px;
      justify-content: space-between;
      text-align: center;
      align-items: center;
      a{
        width: 50%;
        color:#999999;
        display: block;
      }
      .edit-left{
        color:#3887fe;
      }
      span{
        width: 1px;
        height: 14px;
        display: block;
        background: #999999;

      }
    }
  }
}

// 查看更多弹出框
.read-popup{
    width: 390px;
    border-radius: 5px;
    .project-view{
        height: 37.3px;
        line-height: 37.3px;
        font-size: 16px;
        color:#282828;
        text-align: center;
        border-bottom: 1px solid #f4f4f4;    
    }
    .detail{
        margin-top:16px;
        margin-left:12px;
        margin-right: 12px;
        font-size: 14px;
        color:#666666;
        text-indent: 2em;
       margin-bottom: 45px;
    }

}


</style>
